{% extends "aside/erp/base.html" %}
{% load staticfiles %}
{% block custom_tdk %}
    <title>运费计算 - WanFeng</title>
    <meta name="description" content="运费计算">
{% endblock %}

{% block page-title %}运费计算{% endblock %}

{% block app-footer %}
    <div class="app-footer white bg p-a b-t">
    <div class="pull-right text-sm text-muted"></div>
    <span class="text-sm text-muted">WanFeng &copy; Copyright. Version 4.0.1</span>
</div>
{% endblock %}

{% block app-body %}
<script>
    function formatRepo(repo){if(repo.loading){return repo.text}var img="";var title="";var price="";var tag1="";var tag2="";var tag3="";var tag4="";if(repo.imageURLs){img+=repo.imageURLs}else{if(repo.thumb){img+=repo.thumb}}if(repo.subject){title+=repo.subject}else{if(repo.product_title){title+=repo.product_title}}if(repo.productPrice){price+=repo.currencyCode+" "+repo.productPrice}else{if(repo.low_price){if(repo.currency!="None"){price+=repo.currency+" "+repo.low_price}else{price+="$ "+repo.low_price}}}if(repo.packageLength){tag1+="长 "+repo.packageLength+" CM"}else{if(repo.orders){tag1+="订单 "+repo.orders}}if(repo.packageWidth){tag2+="宽 "+repo.packageWidth+" CM"}else{if(repo.votes){tag2+="评价 "+repo.votes}}if(repo.packageHeight){tag3+="高 "+repo.packageHeight+" CM"}else{if(repo.wish_list){tag3+="心愿单 "+repo.wish_list}}if(repo.grossWeight){tag4+="毛重 "+repo.grossWeight+" G"}else{if(repo.average_star_rating){tag4+="评分 "+repo.average_star_rating}}var markup="<div class='select2-result-repository clearfix'>"+"<div class='select2-result-repository__avatar'><img src='"+img+"' /></div>"+"<div class='select2-result-repository__meta'>"+"<div class='select2-result-repository__title'>"+title+"</div>";if(repo.productPrice||repo.low_price){markup+="<div class='select2-result-repository__description'>"+price+"</div>"}markup+="<div class='select2-result-repository__statistics'>"+"<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> "+tag1+" </div>"+"<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> "+tag2+" </div>"+"<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> "+tag3+" </div>"+"<div class='select2-result-repository__forks'><i class='fa fa-star'></i> "+tag4+" </div>"+"</div>"+"</div></div>";return markup};
    function formatRepoSelection(repo){if(repo.grossWeight){$("#Pweight").val(repo.grossWeight);$("#Plength").val(repo.packageLength);$("#Pwidth").val(repo.packageWidth);$("#Pheight").val(repo.packageHeight)}else{if(repo.product_id){$.get("/api/getPackage/?productId="+repo.product_id,function(result){if(result.error==0){$("#Pwidth").val(result.Width);$("#Plength").val(result.Length);$("#Pheight").val(result.Height);$("#Pweight").val(result.Weight)}else{alert("获取包裹参数失败！");$("#Pwidth").val("");$("#Plength").val("");$("#Pheight").val("");$("#Pweight").val("");$("#Pweight").focus()}})}}var title="";if(repo.subject){title+=repo.productId+" | "+repo.subject.slice(0,60)}else{if(repo.product_title){title+=repo.product_id+" | "+repo.product_title.slice(0,60)}}var txt="";if(repo.imageURLs){txt+='<tr><td><img src="'+repo.imageURLs+'" class="w-96 img-responsive" alt=""></td>';txt+="<td>"+repo.subject+"</td>";txt+="<td>-</td>";txt+="<td>"+repo.productPrice+"</td>";txt+="<td>-</td>";txt+="<td>-</td>";txt+="</tr>"}else{if(repo.thumb){txt+='<tr><td><img src="'+repo.thumb+'" class="w-96 img-responsive" alt=""></td>';txt+="<td>"+repo.product_title+"</td>";txt+="<td>-</td>";txt+="<td>"+repo.low_price+"</td>";txt+="<td>-</td>";txt+="<td>-</td>";txt+="</tr>"}}$(".goodsInformation").html(txt);$("#goodsPanel").css("display","block");return title||repo.text};
    function formatCountry(country){if(country.loading){return country.text}var markup="<div class='select2-result-repository clearfix'>"+"<div class='select2-result-repository__avatar'><span class='label warning label-lg'>"+country.country_code+"</span></div>"+"<div class='select2-result-repository__meta'>"+"<div class='select2-result-repository__title'>"+country.country_name_cn+"</div>";if(country.country_name){markup+="<div class='select2-result-repository__description'>"+country.country_name+"</div>"}markup+="</div>"+"</div></div>";return markup};
    function formatCountrySelection(country){return country.country_name_cn||country.text};
</script>

<div class="padding">
<div class="box">

<div class="row p-a">
    <div class="col-sm-12">
        <div class="box">
            <div class="box-header primary">
                <h3>产品信息</h3>
                </div>
            <div class="box-body">
                <div class="row">
                <div class="col-sm-12" id="goodsPanel" style="display: none;">
                    <table class="table table-colored table-bordered table-teal">
                          <thead>
                            <tr>
                              <th>主图</th>
                              <th style="max-width: 300px;">标题</th>
                              <th>中文标题</th>
                              <th>售价(USD)</th>
                              <th>进货综合价格（RMB）</th>
                              <th>供货商</th>
                              <th>竞争对手</th>
                            </tr>
                          </thead>
                          <tbody class="goodsInformation">

                          </tbody>
                        </table>
                </div>

                        <div class="col-sm-12">
                                <div class="col-md-6 m-t-1">
                                    <div class="form-group">
                                                        <div class="row">
                                                            <div class="col-sm-3 m-b-10">
                                                                <label for="bedrooms">重量（ g ）</label>
                                                                <input type="text" class="form-control inputNumber" id="Pweight">
                                                            </div>
                                                            <div class="col-sm-3 m-b-10">
                                                                <label for="bedrooms">长（ CM ）</label>
                                                                <input type="text" class="form-control inputNumber" id="Plength">
                                                            </div>
                                                            <div class="col-sm-3 m-b-10">
                                                                <label for="Square-ft">宽（ CM ） </label>
                                                                <input type="text" class="form-control inputNumber" id="Pwidth">
                                                            </div>
                                                            <div class="col-sm-3 m-b-10">
                                                                <label for="car-parking">高（CM）</label>
                                                                <input type="text" class="form-control inputNumber" id="Pheight">
                                                            </div>
                                                        </div>
                                                    </div>



                                </div>
                                <div class="col-md-6">
                                    <div class="b-b b-primary nav-active-primary">
                                        <ul class="nav nav-tabs">
                                            <li class="nav-item"><a class="nav-link active" href="#" data-toggle="tab" data-target="#tab-online" aria-expanded="true">在线产品</a></li>
                                            <li class="nav-item"><a class="nav-link" href="#" data-toggle="tab" data-target="#tab-stock" aria-expanded="false">库存产品</a></li>
                                            <li class="nav-item"><a class="nav-link" href="#" data-toggle="tab" data-target="#tab-collect" aria-expanded="false">采集产品</a></li>
                                        </ul>
                                    </div>
                                    <div class="tab-content p-a m-b-md">
                                        <div class="tab-pane animated fadeIn text-muted active" id="tab-online" aria-expanded="true">
                                            <select class="" id="selectProductID" name="selectProductID" data-ui-jp="select2" data-ui-options="{theme: 'bootstrap',ajax: {
    url: '/erp/ajaxSearch/',dataType: 'json',delay: 250,data: function (params) {return {q: params.term,page: params.page};},
    processResults: function (data, params) {params.page = params.page || 1;return {results: data.items,pagination: {more: (params.page * 30) < data.total_count}};},cache: true
  },escapeMarkup: function (markup) { return markup; },minimumInputLength: 1,templateResult: formatRepo,templateSelection: formatRepoSelection}" style="width: 100%;">

                                    </select>
                                        </div>
                                        <div class="tab-pane animated fadeIn text-muted" id="tab-stock" aria-expanded="false">
                                            <select class="" id="selectStockProductID" name="selectStockProductID" data-ui-jp="select2" data-ui-options="{theme: 'bootstrap',ajax: {
    url: '/erp/ajaxSearch/',
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        q: params.term,
        page: params.page
      };
    },
    processResults: function (data, params) {
      params.page = params.page || 1;

      return {
        results: data.items,
        pagination: {
          more: (params.page * 30) < data.total_count
        }
      };
    },
    cache: true
  },
  escapeMarkup: function (markup) { return markup; },
  minimumInputLength: 1,
  templateResult: formatRepo,
  templateSelection: formatRepoSelection}" style="width: 100%;">

                                    </select>
                                        </div>
                                        <div class="tab-pane animated fadeIn text-muted" id="tab-collect" aria-expanded="false">
                                            <select class="" id="selectCollectProductID" name="selectCollectProductID" data-ui-jp="select2" data-ui-options="{theme: 'bootstrap',ajax: {
    url: '/aliexpress/ajaxSearch/',
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        q: params.term,
        page: params.page
      };
    },
    processResults: function (data, params) {
      params.page = params.page || 1;

      return {
        results: data.items,
        pagination: {
          more: (params.page * 30) < data.total_count
        }
      };
    },
    cache: true
  },
  escapeMarkup: function (markup) { return markup; },
  minimumInputLength: 1,
  templateResult: formatRepo,
  templateSelection: formatRepoSelection}" style="width: 100%;">

                                    </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <div class="col-sm-12">
                            <div class="row">
                                <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">目的国家：</label>

                <select id="country" name="country" class="form-control select2" data-ui-jp="select2" data-ui-options="{theme: 'bootstrap',ajax: {
    url: '/aliexpress/ajaxCountry/',
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        q: params.term,
        page: params.page
      };
    },
    processResults: function (data, params) {
      params.page = params.page || 1;

      return {
        results: data.items,
        pagination: {
          more: (params.page * 30) < data.total_count
        }
      };
    },
    cache: true
  },
  escapeMarkup: function (markup) { return markup; },
  minimumInputLength: 1,
  templateResult: formatCountry,
  templateSelection: formatCountrySelection}" style="width: 100%">
                                        <option value="俄罗斯" selected>俄罗斯</option>
                                    </select>


                                    </div>
                            </div>
                                <div class="col-md-2">
                                <div class="form-group">
                                    <label for="isHandian">是否含电：</label>
                                    <select name="isHandian" class="form-control custom-select" id="isHandian">
                                        <option value="0">不带电</option>
                                        <option value="1">带电</option>
                                        <option value="2">内置电池</option>
                                        <option value="3">带磁</option>
                                    </select>


                                </div>
                            </div>
                                <div class="col-sm-2 m-b-10">
                                                                <label for="Square-ft">进货价 </label>
                                                                <input type="text" class="form-control inputPrice" id="Pjinghuojia">
                                                            </div>
                                <div class="col-sm-2 m-b-10">
                                                                <label for="car-parking">利润</label>
                                                                <input type="text" class="form-control inputPrice" id="Pprofit">
                                                            </div>
                            </div>

                        </div>

                        <div class="col-xs-12 m-b-30 text-center m-t-10">
                        <button type="button" id="searchExpress" class="btn btn-primary waves-effect waves-light"><i class="mdi mdi-magnify m-r-5"></i>计算运费</button>


                        </div>
                    </div>
                <div class="row">
                    <div class="col-sm-12 m-t-2" style="display: none" id="showLogistics">

                        <table class="table table-colored table-bordered table-teal">
                          <thead class="primary">
                            <tr>
                              <th>类型</th>
                              <th>渠道</th>
                              <th>是否计抛</th>
                              <th style="width: 90px;">带电类型</th>
                              <th>物流费（RMB）</th>
                              <th>推荐售价（USD）</th>
                              <th>运货时间（天）</th>
                              <th>核算报告</th>
                            </tr>
                          </thead>
                          <tbody class="logistic-fee">

                          </tbody>
                        </table>
                    </div>



                    </div>

            </div>
        </div>
    </div>


</div>


<div id="modal-logisticsTips" class="modal black-overlay" data-backdrop="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><span id="logisticsTitle">渠道简介</span> <a data-dismiss="modal" class="pull-right text-muted text-lg p-a-sm m-r-sm">×</a></h5>

            </div>
            <div class="modal-body text-center p-lg m-l-1 m-r-3 logisticsTipsContent">
                <p></p>
            </div>

        </div>
    </div>
</div>

<footer class="light lt p-a">
    <div class="row">


    </div>
</footer>
</div>
</div>

{% endblock %}